<template>
  <div>
    <div class="sign-in">
      <div class="road">
        <img src="/src/assets/mall/sign-word.png" class="word">
        <img :src="`/src/assets/mall/day-${days}.png`" alt="签到路线" class="line">
        <div class="btn" @click="doSign">{{`${can ? '签到一下' : '已签到'}`}}</div>
      </div>
      <div class="hint">
        <div class="title">签到规则：</div>
        <p>*&nbsp;签到的奖励周期为7天</p>
        <p>*&nbsp;每天完成一次签到，可获得相应的惠币奖励</p>
        <p>*&nbsp;连续签到7天，可获得额外奖励</p>
        <p>*&nbsp;如中断，将从第一天重新开始</p>
      </div>
      <mt-popup v-model="popShow" position="middle">
        <div class="sign-card">
          <div class="desc">
            <p class="big">恭喜您获得{{huiCoin}}惠币</p>
            <p class="small">已签到{{days}}天，保持努力！</p>
          </div>
          <div class="btn-group">
            <span @click="$router.push({name: 'Mall'})">去商城查看</span>
            <span @click="$router.push({name: 'Share'})">分享给好友</span>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {MessageBox} from 'Mint-ui'

  export default {
    name: 'SignIn',
    data () {
      return {
        days: 0,
        huiCoin: 0,
        can: false,
        popShow: false
      }
    },
    methods: {
      getDays () {
        this.$post('/vue/sign/get_days').then(data => {
          this.days = data.days
          this.can = Boolean(Number(data.can_sign))
        })
      },
      doSign () {
        this.$post('/vue/sign/sign').then(data => {
          if (data === 'repeat') {
            MessageBox.alert('您今天已经成功签到过了哦', '温馨提示', {confirmButtonText: '确定，明天再来'})
          } else {
            this.huiCoin = data.alter_num
            this.popShow = true
            this.getDays()
          }
        })
      }
    },
    mounted () {
      this.getDays()
      this.wechatShare({userShare: true})
    }
  }
</script>

<style lang="less">
  @c-53: rgb(53, 53, 53);
  @c-117: rgb(117, 117, 117);
  @c-120: rgb(120, 120, 120);
  @c-173: rgb(173, 173, 173);

  .sign-in {
    background-color: #FFF;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url('/src/assets/mall/sign-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    .road {
      width: 80vw;
      height: 95vw;
      margin: 72px auto 0;
      background-image: url('/src/assets/mall/sign-road-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .word {
        width: 50%;
        height: auto;
        margin-top: 7%;
      }
      .line {
        margin-top: 2%;
        width: 80%;
        height: auto;
      }
    }
    .btn {
      width: 46%;
      height: 12%;
      margin: 5% auto 0;
      background-image: url('/src/assets/mall/sign-btn.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #FFF;
      font-size: 16px;
      line-height: 24px;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
    }
    .hint {
      text-align: left;
      padding: 30px 20px 20px;
      .title {
        font-size: 13px;
        line-height: 18px;
        color: @c-120;
        margin-bottom: 12px;
      }
      p {
        font-size: 12px;
        line-height: 17px;
        color: @c-173;
        margin-bottom: 6px;
      }
    }
    .mint-popup {
      background-color: transparent;
      .sign-card {
        width: 80vw;
        height: 100vw;
        margin-top: -40vw;
        background-color: transparent;
        background-image: url('/src/assets/mall/sign-card.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        .desc {
          position: absolute;
          bottom: 17vw;
          left: 0;
          right: 0;
          margin: auto;
          font-weight: 100;
          .big {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 1px;
            color: @c-117;
            margin-bottom: 12px;
          }
          .small {
            font-size: 12px;
            line-height: 17px;
            letter-spacing: 1px;
            color: @c-53;
          }
        }
        .btn-group {
          font-size: 14px;
          line-height: 20px;
          color: @c-117;
          width: 76%;
          height: 10vw;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            flex: 1;
          }
        }
      }
    }
  }
</style>